
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../jquery.min.js"></script>
</head>
<body>

<script type="text/javascript">
    $(function () {
        var menuArry = [
            { id: 1, name: "办公管理", pid: 0 },
            { id: 2, name: "请假申请", pid: 1 },
            { id: 3, name: "出差申请", pid: 1 },
            { id: 4, name: "请假记录", pid: 2 },
            { id: 5, name: "系统设置", pid: 0 },
            { id: 6, name: "权限管理", pid: 5 },
            { id: 7, name: "用户角色", pid: 6 },
            { id: 8, name: "菜单设置", pid: 6 },
        ];

        GetData(0, menuArry)
        $("body").append(menus);
    });

    //菜单列表html
    var menus = '';

    //根据菜单主键id生成菜单列表html
    //id：菜单主键id
    //arry：菜单数组信息
    function GetData(id, arry) {
        var childArry = GetParentArry(id, arry);
        if (childArry.length > 0) {
            menus += '<ul>';
            for (var i in childArry) {
                menus += '<li>' + childArry[i].name;
                GetData(childArry[i].id, arry);
                menus += '</li>';
            }
            menus += '</ul>';
        }
    }

    //根据菜单主键id获取下级菜单
    //id：菜单主键id
    //arry：菜单数组信息
    function GetParentArry(id, arry) {
        var newArry = new Array();
        for (var i in arry) {
            if (arry[i].pid == id)
                newArry.push(arry[i]);
        }
        return newArry;
    }
</script>
</body>
</html>


<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<title>Title</title>-->

    <!--<script src="rollups/md5.js"></script>-->
<!--</head>-->
<!--<body>-->

<!--<script>-->

    <!--var data = [-->
        <!--{-->
            <!--id:1,-->
            <!--name :"一级分类：1",-->
            <!--pid :0,-->
        <!--},-->
        <!--{-->
            <!--id:2,-->
            <!--name :"二级分类：1",-->
            <!--pid :1,-->
        <!--},-->
        <!--{-->
            <!--id:3,-->
            <!--name :"三级分类：3",-->
            <!--pid :2,-->
        <!--},-->
        <!--{-->
            <!--id:4,-->
            <!--name :"一级分类：2",-->
            <!--pid :0,-->
        <!--},-->
        <!--{-->
            <!--id:7,-->
            <!--name :"f级分类：2",-->
            <!--pid :4,-->
        <!--},-->
        <!--{-->
            <!--id:10,-->
            <!--name :"f级分类：2",-->
            <!--pid :7,-->
        <!--},-->
        <!--{-->
            <!--id:9,-->
            <!--name :"f级分类：2",-->
            <!--pid :10,-->
        <!--},-->
        <!--{-->
            <!--id:12,-->
            <!--name :"f级分类：2",-->
            <!--pid :9,-->
        <!--},-->
        <!--{-->
            <!--id:15,-->
            <!--name :"f级分类：2",-->
            <!--pid :12,-->
        <!--},-->
        <!--{-->
            <!--id:13,-->
            <!--name :"f级分类：2",-->
            <!--pid :15,-->
        <!--},-->
    <!--]-->



    <!--function toTree(data) {-->
        <!--// 删除 所有 children,以防止多次调用-->
        <!--data.forEach(function (item) {-->
            <!--delete item.children;-->
        <!--});-->

        <!--// 将数据存储为 以 id 为 KEY 的 map 索引数据列-->
        <!--var map = {};-->
        <!--data.forEach(function (item) {-->
            <!--map[item.id] = item;-->
        <!--});-->
<!--//        console.log(map);-->

        <!--var val = [];-->
        <!--data.forEach(function (item) {-->

            <!--// 以当前遍历项，的pid,去map对象中找到索引的id-->
            <!--var parent = map[item.pid];-->

            <!--// 好绕啊，如果找到索引，那么说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中-->
            <!--if (parent) {-->

                <!--(parent.children || ( parent.children = [] )).push(item);-->

            <!--} else {-->
                <!--//如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级-->
                <!--val.push(item);-->
            <!--}-->
        <!--});-->

        <!--return val;-->
    <!--}-->

    <!--console.log(toTree(data))-->


<!--</script>-->

<!--</body>-->
<!--</html>-->